const listDom = document.querySelector('.list')
let flip;
let currentNode = null;
listDom.ondragstart = e => {
  const timer = setTimeout(() => {
    clearTimeout(timer)
    e.target.classList.add('moving')
  }, 0)
  currentNode = e.target
  // 拖动时默认行为是复制，此处可以改为移动
  e.dataTransfer.effectAllowed = 'move'
  flip = new Flip(listDom.children, 0.5)
}
listDom.ondragover = (e) => {
  e.preventDefault()
}
listDom.ondragenter = e => {
  e.preventDefault()
  if (e.target === listDom || e.target === currentNode) {
    return
  }
  const children = [...listDom.children]
  const currentIndex = children.indexOf(currentNode)
  const targetIndex = children.indexOf(e.target)
  if (currentIndex < targetIndex) {
    // 下面
    // console.log('下面');
    listDom.insertBefore(currentNode, e.target.nextElementSibling)
  } else {
    // 上面
    // console.log('上面');
    listDom.insertBefore(currentNode, e.target)
  }
  // console.log(e.target);
  flip.play()
}
listDom.ondragend = e => {
  e.target.classList.remove('moving')
}


// 自定义拖拽时跟随鼠标的样式
function dragWithCustomImage(event) {
  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
  canvas.width = canvas.height = 50;

  var ctx = canvas.getContext("2d");
  ctx.lineWidth = 4;
  ctx.moveTo(0, 0);
  ctx.lineTo(50, 50);
  ctx.moveTo(0, 50);
  ctx.lineTo(50, 0);
  ctx.stroke();
  ctx.stroke.style = 'red'

  var dt = event.dataTransfer;
  dt.setData('text/plain', 'Data to Drag');
  dt.setDragImage(canvas, 25, 25);
}

